<template>
  <el-tabs v-model="activeTag">
    <el-tab-pane
      :label="L('RoleDetails')"
      name="first"
    >
      <el-form
        ref="editForm"
        label-width="80px"
        :model="editEntity"
        :rules="formRule"
        size="small"
      >
        <el-form-item
          :label="L('RoleName')"
          prop="name"
        >
          <el-input
            v-model="editEntity.name"
            :maxlength="32"
            :minlength="2"
          />
        </el-form-item>
        <el-form-item
          :label="L('DisplayName')"
          prop="displayName"
        >
          <el-input
            v-model="editEntity.displayName"
            :maxlength="32"
            :minlength="2"
          />
        </el-form-item>
        <el-form-item
          :label="L('Description')"
          prop="description"
        >
          <el-input
            v-model="editEntity.description"
            :maxlength="1024"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="editEntity.isDefault">{{ L('IsDefault') }}</el-checkbox>
          <el-tag type="danger">新用户将默认拥有此角色.</el-tag>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane
      :label="L('RolePermission')"
      name="second"
    >
      <!-- <el-checkbox-group v-model="editEntity.permissions">
        <el-checkbox
          v-for="permission in permissions"
          :key="permission.name"
          :label="permission.name"
        ><span>{{ permission.displayName }}</span></el-checkbox>
      </el-checkbox-group> -->

      <el-tree
        ref="permission"
        render-after-expand
        :data="permissions"
        show-checkbox
        node-key="name"
        :default-expanded-keys="['Pages']"
        :props="permissionProps"
        @check-change="handleCheckChange"
      />
    </el-tab-pane>

  </el-tabs>
</template>
<script>
export default {
  props: {
    entity: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      activeTag: 'first',
      editEntity: {},
      formRule: {
        name: [{ required: true, message: this.L('FieldIsRequired', undefined, this.L('RoleName')), trigger: 'blur' }],
        displayName: [{ required: true, message: this.L('FieldIsRequired', undefined, this.L('DisplayName')), trigger: 'blur' }]
      },
      permissionProps: {
        children: 'children',
        label: 'displayName'
      }
    }
  },
  computed: {
    permissions() {
      // 打开user界面已经初始化过了
      return this.$store.state.role.permissions
    }
  },
  watch: {
    entity(val) {
      this.editEntity = val
      this.$refs.permission.setCheckedKeys(this.editEntity.permissions)
    }
  },
  mounted() {
    this.editEntity = this.entity
    this.$refs.permission.setCheckedKeys(this.editEntity.permissions)
  },
  methods: {
    handleCheckChange() {
      this.editEntity.permissions = this.$refs.permission.getCheckedKeys()
    },
    clearValidate() {
      this.$refs.editForm.clearValidate()
    },
    validate(cb) {
      this.$refs.editForm.validate(cb)
    }
  }
}
</script>
